<template>
  <TinyCheckbox size="mini" v-model="val" :false-label="0" :true-label="1" @change="change">{{label}}</TinyCheckbox>
</template>
<script>
import { Checkbox } from '@opentiny/vue'

export default {
  props: {
    label: {type: String, default: ''},
    modelValue: {type: [Number, Boolean, String], default: 0}
  },
  components: {
    TinyCheckbox: Checkbox
  },
  data () {
    return {
      val: this.modelValue ? 1 : 0
    }
  },
  emits: ['update:modelValue','changeVal'],
  methods: {
    change (val) {
      this.$emit('changeVal', val)
    }
  },
  watch: {
    modelValue (val) {
      this.val = val ? 1 : 0
    },
    val (val) {
      this.$emit('update:modelValue', val)
    },

  }
}
</script>